﻿@inherits LayoutComponentBase

<PageTitle>WeatherCore - 一个基于和风天气的开源天气系统</PageTitle>

<ErrorBoundary @ref="errorBoundary">
    <ChildContent>
        <header class="header-box">
            <h2 style="color: #292421">WeatherCore</h2>
            <Menu Theme="MenuTheme.Light" Mode="MenuMode.Horizontal">
                <MenuItem RouterLink="/">
                    主页
                </MenuItem>
            </Menu>
        </header>
        <div>
            @Body
        </div>
    </ChildContent>
    <ErrorContent Context="ex">
        <Flex Justify="center" Style="height: 100vh">
            <Result Status="error"
                    Title="网站好像有点问题"
                    SubTitle="@ex.Message">
                <ChildContent>
                    <div class="desc">
                        <Paragraph>
                            <Text Strong Style="font-size: 16px;">
                                在您使用时出现了错误:
                            </Text>
                        </Paragraph>
                        <Paragraph>
                            <Icon Type="close-circle" Theme="Outline" Class="site-result-demo-error-icon"/> 如果你是开发者
                            <Button Type="@ButtonType.Link" Style="text-align: center" OnClick="@(() => IsLookError = !IsLookError)">
                                @if (IsLookError)
                                {
                                    <p>收起 <Icon Type="left" Theme="outline"/></p>
                                }
                                else
                                {
                                    <p>查看信息 <Icon Type="right" Theme="outline"/></p>
                                }
                            </Button>
                            <a href="@ex.HelpLink" target="_blank"></a>
                        </Paragraph>
                        <Paragraph>
                            <Icon Type="close-circle" Theme="Outline" Class="site-result-demo-error-icon"/> 您也可以帮助我们
                            <a href="https://gitee.com/XAUATiOSClub/iOSClub.Table/issues" target="_blank">提一个Issue &gt;</a>
                        </Paragraph>
                        @if (IsLookError)
                        {
                            <Paragraph>
                                @ex.ToString()
                            </Paragraph>
                        }
                    </div>
                </ChildContent>
                <Extra>
                    <Button Type="@ButtonType.Primary" OnClick="@errorBoundary.Recover"> 恢复 </Button>
                </Extra>
            </Result>
        </Flex>
    </ErrorContent>
</ErrorBoundary>

@code {
    ErrorBoundary errorBoundary = new();
    bool IsLookError { get; set; }
}

<style>
    .header-box {
            margin: 10px;
            padding-left: 10px;
            padding-right: 10px;
            border-radius: 10px;
            /* 添加圆角 */
            overflow: hidden;
            /* 防止子元素超出边界 */
            display: flex;
            scroll-snap-align: end;
            align-items: center;
            justify-content: space-between;
            text-align: center;
            color: #f3f5f7
        }
    body{
        min-height: 100vh;
    }
</style>